import { useQuery } from "@apollo/client"
import { GetNoticesResult, GetNoticesQuery } from "../admin/notices/page"
import { GetWebsiteExamsQuery } from "../admin/website/page"
import { NoticeEntity } from "../../queries/notices"
import dayjs from "dayjs"
import { Link } from "react-router"
import LineDivider from "../../components/LineDivider"


const ExamsPage = () => {
  const noticeQuery = useQuery<GetNoticesResult>(GetNoticesQuery, {
    variables: {
      page: 1,
      size: 1000000,
      type: "WEBSITE"
    }
  })
  const list = noticeQuery.data?.getNotices.data || []
  const context = useQuery(GetWebsiteExamsQuery)
  const entity: NoticeEntity = {
    id: 0,
    title: "电子学会试卷下载，可打印",
    context: context.data?.getWebsiteExams,
    type: "WEBSITE",
    sys_userId: 0,
    view: 0,
    createAt: new Date,
    updateAt: new Date
  }
  return (
    <div className="flex gap-2">
      <div className="grow">
        <div className="text-center text-2xl">
          {entity?.title}
        </div>
        <LineDivider />
        <div
          dangerouslySetInnerHTML={{
            __html: entity?.context + ""
          }}
        ></div>
      </div>
      <div className="w-60">
        <div>站务公告</div>
        <LineDivider />
        {list.map((item) => {
          return (
            <div>
              <div className="">
                <Link to={`/website/notice?id=${item.id}`} className="text-blue-400">
                  {item.title}
                </Link>
              </div>
              <div className="text-right text-sm text-gray-600">
                {dayjs(item.createAt).format("YYYY-MM-DD")}
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
export default ExamsPage